<template>
  <li @click="goodsDetail(loveInfo.bookId)">
    <a class="co-img">
      <img width="203" height="189" :src="$store.state.baseImgUrl+loveInfo.book.img">
    </a>
    <div class="col-div">
      <div class="coll-dv">
        <h2><a>{{ loveInfo.book.name }}</a></h2>
        <p class="zt"></p>
        <p style="color:#000; padding:8px 0;">￥<span style="font-size:18px;">{{ loveInfo.book.price }}</span></p>
        <p style="color:#000; padding:8px 0;">{{ loveInfo.book.binding }}</p>
        <p class="zt t-ac">销量{{ loveInfo.book.saleCount }}本</p>
      </div>
      <el-button type="primary" class="delColletion" @click.stop="delCollection(loveInfo.id)">取消收藏</el-button>
    </div>
  </li>
</template>

<script>
export default {
  name: "CollectionItem",
  props:{
    loveInfo:{

    }
  },
  data(){
    return{
      delCollectionQuery:{
        id:null
      },

    }
  },
  methods:{
    delCollection(bookId){
      this.delCollectionQuery.id = bookId
      this.getRequest('/cms/bookFavority/delete/'+this.delCollectionQuery.id).then((resp)=>{
        if(resp.status === 200){
          this.$message.success('取消收藏成功。')
          location.reload()
        }else{
          this.$message.error('取消收藏失败。请再试一次！')
        }
      })
    },
    goodsDetail(id){
      this.$router.push({path:'/purchasePage', query: {curBookId: id}})
    }
  }
}
</script>

<style scoped>
.shop-ul li {
  float: left;
  border: 1px solid #BFBFBF;
  margin: 0px 2px 29px;
  width: 224px;
}

.shop-ul li .co-img {
  display: block;
  margin: 10px;
}

.shop-ul li .col-div {
  overflow: hidden;
}

.coll-dv {
  background: #f5f5f5;
  padding: 18px;
}

.coll-dv h2 {
  font-size: 16px;
  height: 48px;
  overflow: hidden;
}

.zt {
  font-family: "宋体";
}

.t-ac {
  color: #b50029;
}
.delColletion{
  position: relative;
  top: -4em;
  left: 8em;
}
</style>